import React, { useState, useRef, useEffect } from 'react';

interface State {
  currentDis: string;
  start: number;
  moveDis: number;
  wrapHeight: number;
  startTime: number;
  currentIndex: number;
}

let stateO: State = {
  moveDis: 0, // 滑动的距离
  start: 0, // 开始位置
  wrapHeight: 0,
  currentDis: '0%',
  startTime: 0, // 开始时间
  currentIndex: 0,
};

export default function Swiper(props: any) {
  const wrapDom: any = useRef();
  const scrollDom: any = useRef();
  const [state, setState] = useState(stateO);

  const direction: string = props.direction === 'x' ? 'clientX' : 'clientY';
  // 位移多少距离
  const move = (d: any, px: string) => {
    if (props.direction === 'x') {
      d.style.transform = `translate3d(${px}, 0 , 0)`;
    } else {
      d.style.transform = `translate3d(0, ${px}, 0)`;
    }
  };
  const movePrevNext = () => {
    let direct = '';
    if (state.moveDis > 0) {
      state.currentIndex--;
      direct = 'prev';
      // state.currentDis = state.currentDis + state.wrapHeight;
      state.currentDis = -state.currentIndex * 100 + '%';
    } else {
      state.currentIndex++;
      direct = 'next';
      // state.currentDis = state.currentDis - state.wrapHeight;
      state.currentDis = -state.currentIndex * 100 + '%';
    }
    move(scrollDom.current, `calc(${state.currentDis})`);

    if (typeof props.togglePage === 'function') {
      props.togglePage(state.currentIndex, direct);
    }
  };

  // 触摸开始
  const touchStart = (e: any) => {
    e.preventDefault();
    e.stopPropagation();
    scrollDom.current.style.transition = `transform 0s`;
    state.start = e.touches[0][direction];
    state.moveDis = 0;
    state.startTime = Date.now();
  };
  // 触摸移动
  const touchMove = (e: any) => {
    // console.log(`calc(${state.currentDis} + ${state.moveDis})`)
    state.moveDis = e.touches[0][direction] - state.start;
    move(scrollDom.current, `calc(${state.currentDis} + ${state.moveDis}px)`);
    if (Date.now() - state.startTime > 100) {
      state.startTime = Date.now();
    }
  };
  // 触摸结束
  const touchEnd = (e: any) => {
    // e.preventDefault();
    // e.stopPropagation();
    if (Math.abs(state.moveDis) < 30) {
      // e.preventDefault();
      // e.stopPropagation();

      move(scrollDom.current, state.currentDis);
      return;
    }
    scrollDom.current.style.transition = `transform 0.3s`;

    if (Date.now() - state.startTime < 100) {
      movePrevNext();
      return;
    }

    if (Math.abs(state.moveDis) < state.wrapHeight / 2) {
      move(scrollDom.current, state.currentDis);
    } else {
      movePrevNext();
    }
  };

  useEffect(() => {
    setState({ ...state, wrapHeight: wrapDom.current.clientHeight });
  }, []);

  return (
    <div style={props.style} ref={wrapDom} onTouchMove={touchMove} onTouchEnd={touchEnd} onTouchStart={touchStart} className={props.className}>
      <div ref={scrollDom} className={props.scrollClass}>
        {props.children}
      </div>
    </div>
  );
}
